<template>
  <div>
    <group label-margin-right="5px" label-align="left">

      <x-input title='手机号码:' type="tel" :max="11" is-type="china-mobile" readonly
               keyboard="number" ref="phoneNumber" v-model="registerInfo.oldAccountId"
               @on-blur="checkPhoneNumber" required>
      </x-input>
      <x-input title='身份证号:' :max="18" ref="IdNum" v-model="registerInfo.IdNum"
               required>
      </x-input>
      <x-input title='新手机号码:' type="tel" :max="11" is-type="china-mobile"
               keyboard="number" ref="accountId" v-model="registerInfo.accountId"
               @on-blur="checkPhoneNumber" required>
      </x-input>
      <x-input title="图形验证码:" class="weui-cell_vcode" v-model="verCode" required novalidate :icon-type="iconType">
        <img slot="right" class="weui-vcode-img" :src="verCodeData" style="width: 100px;" @click="getverCode"
             alt="看不清，换一张">
      </x-input>
      <x-input title="验证码:" class="weui-vcode" v-model="registerInfo.smsCode">
        <x-button slot="right" type="primary" mini @click.native="SendSMS" :disabled="disabledSend"
                  style="padding-right: 30px;">
          发送验证码

        </x-button>
        <span slot="right" style="position: relative;">
            <countdown v-model="countdownTime" :start="countdownStart" @on-finish="finish"
                       class="countdownTime"></countdown>
          </span>
      </x-input>
    </group>

    <div class="btn-box" style="margin-top: 30px;">
      <x-button type="primary" @click.native="submitData">保存</x-button>
    </div>
    <div v-transfer-dom>
      <alert v-model="alertShow" title="提示"> {{ alertMessage }}</alert>
    </div>

    <toast v-model="showPositionValue" type="cancel" :text="toastText" width="10em"></toast>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Popup, XButton, Group, XInput, Alert, Toast, TransferDomDirective as TransferDom, Countdown} from 'vux'
  import Guid from '../login/js/guid'
  import getSource from '../login/js/getSource'

  export default {
    data() {
      return {
        verCode: '',//验证码
        vguid: '',//验证码随机数
        verCodeData: '',//验证码图
        iconType: '',

        sessionUser: JSON.parse(localStorage.getItem('user')),
        registerInfo: {
          oldAccountId: '',//JSON.parse(localStorage.getItem('user')).accountId,
          accountId: '',
          source: '',
          smsCode: '',
          IdNum: ''
        },
        disabledSend: false,
        countdownTime: 120,
        countdownStart: false,
        alertShow: false,
        alertMessage: '',
        toastText: '',
        showPositionValue: false
      }
    },
    created() {
      //console.log(JSON.parse(localStorage.getItem('user')));
      this.initUser();
      this.getverCode();
      this.registerInfo.source = getSource();
    },
    watch: {
      verCode: function () {
        let _self = this;
        let apiurl = global.baseApiUrl + "/base/captcha/verify/" + _self.vguid + '/' + this.verCode;
        this.axios.post(apiurl).then(function (res) {
          if (res.data.succ == true) {
            _self.iconType = 'success'
          } else {
            _self.iconType = 'error'
          }
        })
      }
    },
    methods: {
      initUser() {
        let _self = this;
        _self.axios({
          method: 'get',
          url: global.baseApiUrl + '/member/' + _self.sessionUser.guid
        })
          .then(function (response) {
            if (response.status == "200" && response.data.succ) {
              _self.registerInfo.oldAccountId = response.data.data.acountId;
            }
          })
          .catch(function (response) {
            console.log(response);
          });
      },

      goBack() {
        this.$router.push('/')
      },
      //check 电话号码
      checkPhoneNumber() {
        if (!this.$refs.accountId.valid) {
          this.alertShow = true;
          this.alertMessage = '手机号码不正确！';
        }
      },
      //短信发送
      SendSMS() {
        if (this.$refs.accountId.valid && this.iconType == 'success') {
          this.countdownStart = true;
          this.disabledSend = true;
          let _self = this;
          // let apiurl = global.baseApiUrl + "/member/user/sendsms"; //短信接口要不对，
          let apiurl = global.memberApiUrl + "member/reg/sendsms";
          this.axios({
            method: 'post',
            url: apiurl,
            data: {
              phone: _self.registerInfo.accountId,
              verCodeKey: _self.vguid,
              verCode: _self.verCode
            }
          }).then(function (response) {
            _self.getverCode();
            _self.verCode = '';
            _self.iconType = '';
            console.log(response.data);
            if (response.data.succ) {
              _self.alertShow = true;
              _self.alertMessage = '短信已发送！';
            } else if (response.data.code == 915001) {
              _self.alertShow = true;
              _self.alertMessage = '手机号日频率限制！';
            }
            else {
              if (response.data.code == 211003) {
                _self.showMsg("图片验证码不正确");
              } else {
                _self.showMsg(response.data.msg);
              }
              _self.finish();
            }
          }).catch(function (response) {
          });

        } else {
          this.alertShow = true;
          this.alertMessage = '请正确填写手机号码和验证码！';
        }
      },
      finish(index) {
        this.disabledSend = false;
        this.countdownStart = false;
        this.countdownTime = 120;
      },
      submitData() {
        if (this.registerInfo.accountId == "") {
          this.alertShow = true;
          this.alertMessage = "新手机号为空";
          return false;
        }
        if (this.registerInfo.IdNum == "") {
          this.alertShow = true;
          this.alertMessage = "身份证号为空";
          return false;
        }
        if (this.registerInfo.smsCode == "") {
          this.alertShow = true;
          this.alertMessage = "手机短信验证码为空";
          return false;
        }

        let self = this;

        var data = {
          acountId: self.registerInfo.accountId,
          idNum: self.registerInfo.IdNum,
          smscode: self.registerInfo.smsCode
        };
        console.log(data);
        var uid = self.sessionUser.guid;
        let apiurl = global.baseApiUrl + "/member/updatephone/" + uid;
        this.axios({
          method: 'put',
          url: apiurl,
          data: {
            acountId: self.registerInfo.accountId,
            idNum: self.registerInfo.IdNum,
            smscode: self.registerInfo.smsCode
          }
        }).then(function (response) {
          console.log(response.data);
          if (response.data.code == 212001) {
            self.alertMessage = "";
            self.$message({message: '手机号码变更成功!', type: 'success'});
            self.$router.push('/login')
          }
          else {
            self.alertMessage =
              msg[response.data.code] == null ? "程序出现异常，请稍后再试" : msg[response.data.code];
            return;
          }
        }).catch(function (response) {
        });

      },
      //获取图片验证码
      getverCode: function () {
        let _self = this;
        _self.vguid = new Guid().newGUID();
        var apiurl = global.baseApiUrl + '/member/vercode/' + _self.vguid;
        this.axios({
          method: 'post',
          url: apiurl
        }).then(function (response) {
          _self.verCodeData = "data:image/png;base64," + response.data.data;
        }).catch(function (response) {
        });
      },
      showMsg(msg) {
        this.showPositionValue = true;
        this.toastText = msg;
      }
    },
    components: {
      Popup,
      XButton,
      Group,
      XInput,
      Alert,
      Countdown,
      Toast
    },
    directives: {
      TransferDom
    }
  }
</script>
<style lang="less" scoped>
  .showNotice-popup {
    width: 100%;
    padding: 20px;

    h3 {
      font-size: 18px;
      padding: 5px;
      border-bottom: 1px solid #D9D9D9;
      margin-bottom: 15px;
    }

    p {
      line-height: 24px;
      margin-bottom: 5px;
    }

  }

  .map {
    padding: 15px;
  }

  .countdownTime {
    position: absolute;
    left: -26px;
    color: #fff;
    font-size: 14px;
    top: 3px;
  }
</style>
